<template>
	<view class="main">
		<!-- <view>
			<view class="banner-block">
				<swiper class="swiper" autoplay="true" circular='true'>
					<swiper-item v-for="item in banner" :key="item.id" class="banner-item">
						<image :src="item.image" class="slide-image" lazy-load="true" @click="goto(item.url)"></image>
					</swiper-item>
				</swiper>
			</view>
		</view> -->
		<view class="items">
			<view class="item" @click="goto('/pages/baocan/apply')">
				<view><uni-icons type="compose" color="#fff" size="28"></uni-icons> </view>
				<view><text>业绩申报</text></view>
			</view>
			<view  class="item" @click="goto('/pages/baocan/log')">
				<view><uni-icons type="list" color="#fff" size="28"></uni-icons> </view>
				<view><text>申报记录</text></view>
				
			</view>
		</view>
		<view class="category-grids">
			<block v-for="(item,index) in nav" :key="index">
				<view class="category-grid" @click="goto(Array.isArray(item.url) ? item.url[0] : item.url)">
					<view class="tc">
						<image class="category-grid__img" :src='item.icon' lazy-load="true"></image>
					</view>
					<view class="category-grid__label">{{item.title}}</view>
				</view>
			</block>
		</view>
		<view class="panel rank">
			<view class="title">业绩排行</view>
			<block v-for="(item,index) in userRank">
				<view class="item">
					<view>{{index + 1}}.{{item.member.realname}}</view>
					<view>{{item.performance}}</view>
				</view>
			</block>
		</view>
		<view class="panel">
			<view class="title">业绩统计</view>
			<view class="sum">
				<view class="number">{{sum}}</view>
				<view>累计业绩</view>
			</view>
		</view>
		<view style="height: 60rpx;width: 100%;"></view>
	</view>
</template>

<script>
import {
		navList
	} from '@/api/nav.js';
	import {
			rank,sumPerformance
		} from '@/api/analyze.js';
	export default {
		components: {
			
		},
		data() {
			return {
				nav:[],
				userRank:[],
				page:1,
				sum:0
			}
		},
		onLoad() {
			this.getNav();
			this.getRank();
			this.getSum();
			// #ifdef MP-WEIXIN
			//小程序分享到朋友圈
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline'],
			})
			// #endif
		},
		onReady() {
			
		},
		onPullDownRefresh() {
			
		},
		methods: {
			getNav: function() {
				var that = this;
				var args = {
					nav_id:1,
					
				}
				this.$http.get(`${navList}`, {
						...args
					})
					.then(async data => {
						if (data.code == 200) {
							var data = data.data;
							that.nav = data;
						}
					});
			},
			getRank: function() {
				var that = this;
				var args = {
					page: this.$data.page,
					'per-page': 10
				}
				this.$http.get(`${rank}`, {
						...args
					})
					.then(async data => {
						if (data.code == 200) {
							var data = data.data;
							that.userRank = data;
						}
					});
			},
			getSum: function() {
				var that = this;
				var args = {
					
				}
				this.$http.get(`${sumPerformance}`, {
						...args
					})
					.then(async data => {
						that.sum = data.data;
					});
			},
		}
	}
</script>

<style lang="scss">
	.items{
		width: 92%;margin:0 auto;margin-top: 30rpx;
		display: flex;justify-content: space-between;
		.item{background-color: #E91E63;color: #fff;width: 45%;padding: 40rpx 0;text-align: center;border-radius: 20rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
	}
	.panel{
		width: 92%;margin: 0 auto; background-color: #fff;border-radius: 20rpx;padding: 30rpx;
		.title{font-weight: bold;font-size: 40rpx;}
	}
	.rank{
		margin-top: 40rpx;margin-bottom: 20rpx;
		.item{display: flex;justify-content: space-between;padding: 20rpx 0;font-weight: bold;font-size: 34rpx;}
	}
	.sum{
		text-align: center;
		.number{font-weight: bold;margin-bottom: 20rpx;font-size: 50rpx;}
	}
	
	/*导航  */
	.category-grids {
		display: flex;
		align-items: center;
		width: 92%;margin: 0 auto;border-radius: 20rpx;margin-top: 20rpx;
		background-color: #fff;
		padding: 20rpx 0 0 0;
		margin-bottom: 0rpx;
		flex-wrap: wrap;
		
	}
	
	.category-grid {
		width: 25%;
		padding: 25rpx 0;
		text-align: center;
	}
	
	.category-grid__img {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
	}
	
	.category-grid__label {
		margin-top: 20rpx;
		font-size: 28rpx;
		text-align: center
	}
	
	.list-tit {
		margin-top: 50rpx;
		margin-bottom: 40rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.text {
		padding: 0 20rpx;
	}
	
	.list-icon {
		font-size: 34rpx !important;
	}
</style>
